import React from "react";
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { getIssueById } from "@/api/issue";
import { getUserByIdApi } from "@/api/user";
import styles from "./IssueDetail.module.css";
import { Recommend, ScoreRank, PageHeader, Discuss } from "@/components";
import { Avatar } from "antd";
import { formatDate } from "../../utils/tools";

export default function IssueDetail() {
  const { id } = useParams();
  const issueId = id?.toString()?.split("=")[1];
  const [issueInfo, setIssueInfo] = useState({});
  const [userInfo, setUserInfo] = useState([]);

  useEffect(() => {
    async function fecthData() {
      const { data } = await getIssueById(issueId);
      setIssueInfo(data);
      const res = await getUserByIdApi(data.userId);
      setUserInfo(res.data);
    }
    fecthData();
  }, []);

  return (
    <div className={styles.container}>
      <PageHeader title="问答详情" />
      <div className={styles.detailContainer}>
        {/* 左侧 */}
        <div className={styles.leftSide}>
          <div className={styles.question}>
            <h1>{issueInfo.issueTitle}</h1>
          </div>

          <div className={styles.questioner}>
            <Avatar size="default" src={userInfo.avatar} />
            <span className={styles.user}>{userInfo.nickname}</span>
            <span>{formatDate(issueInfo.issueDate)}</span>
          </div>

          {/* 问题内容 */}
          <div className={styles.content}>
            <div dangerouslySetInnerHTML={{ __html: issueInfo.issueContent }}></div>
          </div>

          {/* 评论 */}
          {/* 1：表示问答 2：表示书籍 */}
          <Discuss commentType={1} targetId={issueId} issueInfo={issueInfo} />
        </div>

        {/* 右侧 */}
        <div className={styles.rightSide}>
          <div style={{ marginBottom: 20 }}>
            <Recommend />
          </div>
          <div style={{ marginBottom: 20 }}>
            <ScoreRank />
          </div>
        </div>
      </div>
    </div>
  );
}
